<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <th:block th:insert="~{/common/include_easyui :: include_easyui}"></th:block>

    <script type="text/javascript" th:inline="javascript">
        var ctxPath = /*[[${#httpServletRequest.getContextPath()}]]*/ "/as";

        $(function () {
            //加载部门列表
            $('#select_department').combobox({
                url: ctxPath+'/userMgrController/loadDepartmentList',
                valueField: 'id',
                textField: 'text',
                label: '所属部门：',
                required: true,
                labelAlign: 'right',
                editable: false,
                labelPosition: 'left'

            });

            //加载职称列表
            $('#select_jobTitle').combobox({
                url: ctxPath+'/userMgrController/loadJobTitleList',
                valueField: 'id',
                label: '职称：',
                required: true,
                labelAlign: 'right',
                textField: 'text',
                editable: false,
                labelPosition: 'left'

            });

            //加载角色列表信息
            $('#select_roleIds').combogrid({
                url: ctxPath+'/userMgrController/loadUserRoleList',
                labelAlign: 'right',
                multiple: true,
                editable: false,
                checkOnSelect: true,
                selectOnCheck: true,
                idField: 'roleId',
                textField: 'roleName',
                method: 'get',
                columns: [
                    [
                        {field: 'checkedId', checkbox: true},
                        {field: 'roleId', title: '角色ID', width: 60, halign: "center", align: "center"},
                        {field: 'roleName', title: '角色名称', width: 150, halign: "center", align: "center"},
                        {field: "roleRemark", title: '角色备注', width: 200, halign: "left", align: "left"}
                    ]
                ],
                separator: "，",
                label: '角色分配：',
                labelPosition: 'left'

            });

        });

        function saveData() {

            $("#select_roleIds").combogrid('hidePanel');
            var isValid = jQuery("#addForm").form('validate');
            if (!isValid) {
                jQuery("#addForm").form('enableValidation');
            } else {
                /* //获取选中的所有的角色ID
                var selectRoleIds = $("#select_roleIds").combogrid('getValues');
                //alert(selectRoleIds.length)
                var roleIds = selectRoleIds.join(",");
                //alert(roleIds)
                //存放入隐藏域中
                $("#roleIds").val(roleIds);
                 */

                var saveURL = ctxPath + "/userMgrController/addUser?date=" + new Date() + "";
                var paramObj = jQuery("#addForm").serializeArray();

                //alert(jQuery("#addForm").serialize())

                jQuery.post(saveURL, paramObj, function (responseData) {

                    var code = responseData.code;
                    if (code == "200") {

                        $.messager.confirm('提示对话框', '数据添加成功，是否继续添加?', function (flag) {
                            if (flag) {
                                location.href = ctxPath + "/userMgrController/preAdd";
                            } else {
                                var parentWin = window.parent;
                                parentWin.jQuery("#div_table").datagrid("reload");
                                parentWin.jQuery('#dialog_div').dialog("close");
                            }
                        });

                    } else {
                        $.messager.alert('我的消息', "数据保存出错，原因 ：" + responseData.message, 'error');
                    }

                }, "json");
            }

        }
    </script>

    <style type="text/css">


        .add-form div {
            margin-bottom: 20px;
            /* 	display: flex;
                justify-content:center; */
        }

        .add-form div input {
            max-width: 400px;
            height: 26px;
            width: 100%;
        }

        .add-form .radioSpan {

            position: relative;
            border: 1px solid #95B8E7;
            background-color: #fff;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            margin: 0;
            padding: 0;
            -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
            display: block;
        }

        .add-form .radioSpan input {
            max-width: 30px;
            height: 20px;
            margin-top: 8px;
            margin-left: 20px;
        }

        .add-form .radioSpan span {
            width: 80px;
            display: inline-block;
        }
    </style>
</head>

<body>
<form id="addForm" method="post" class="add-form">
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="userAccount" labelAlign="right"
               data-options="label:'用户账号：',required:true">
    </div>
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="name" labelAlign="right"
               data-options="label:'用户姓名：',required:true">
    </div>

    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input name="department.id" id="select_department">
    </div>
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input name="jobTitle.id" id="select_jobTitle">
    </div>

    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input name="selectRoleIds" id="select_roleIds">
        <!-- <input type="hidden" name="roleIds" id="roleIds"> -->
    </div>


    <!-- 可选 -->
    <div style="padding-left:12%;width: 80%;">
        <label class="textbox-label textbox-label-before" for="sex"
               style="text-align: right; height: 36px; line-height: 36px;">性别：</label>
        <div class="radioSpan" style="width: 61%;height: 34px; line-height: 34px;float: right;margin-right: 22%; ">
            <span><input type="radio" name="sex" value="1"/>男</span>
            <span><input type="radio" name="sex" value="2"/>女</span>
            <span><input type="radio" name="sex" value="0" checked="checked"/>保密</span>
        </div>
    </div>

    <div style="padding-left:12%;width: 80%;">
        <label class="textbox-label textbox-label-before" for="sex"
               style="text-align: right; height: 36px; line-height: 36px;">婚姻状况：</label>
        <div class="radioSpan" style="width: 61%;height: 34px; line-height: 34px;float: right;margin-right: 22%; ">
            <span><input type="radio" name="maritalStatus" value="1"/>已婚</span>
            <span><input type="radio" name="maritalStatus" value="2"/>未婚</span>
            <span><input type="radio" name="maritalStatus" value="0" checked="checked"/>保密</span>
        </div>
    </div>

    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="officeTel" labelAlign="right" data-options="label:'办公号码：'">
    </div>
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="phone" labelAlign="right" data-options="label:'电话：'">
    </div>
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="email" labelAlign="right" data-options="label:'邮箱：'">
    </div>
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="idCardNo" labelAlign="right" data-options="label:'身份证号：'">
    </div>
    <div style="padding-left:12%;width: 80%;">
        <input class="easyui-textbox" name="nativePlace" labelAlign="right" data-options="label:'籍贯：'">
    </div>
    <div style="padding-left:12%;width: 80%;">
        <input class="easyui-textbox" name="address" labelAlign="right" data-options="label:'住址：'">
    </div>
    <!-- 可选 -->

</form>

</body>
</html>
